<template>
  <div class="health-app">
    <!-- 顶部导航 -->
    <van-nav-bar title="用心守护你的健康" fixed safe-area-inset-top class="nav-bar" />

    <!-- 主体内容 -->
    <div class="content">
      <!-- 用户信息 -->
      <div class="user-card">
        <van-image round width="60" height="60" fit="cover" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          class="user-avatar" />
        <div class="user-info">
          <h2>{{ store.useStore.userName }}</h2>
          <p class="phone">180****8142</p>
        </div>
      </div>

      <!-- 功能入口 -->
      <van-grid :border="false" :column-num="2" class="action-grid">
        <van-grid-item>
          <van-button icon="medal-o" type="primary" block @click="goTohealthplan">健康方案 <br/>为您良心定制</van-button>
        </van-grid-item>
        <van-grid-item>
          <van-button icon="user-o" type="info" block @click="goToChat">在线问诊</van-button>
        </van-grid-item>
      </van-grid>

      <!-- 健康状态 -->
      <div class="health-status">
        <h3>健康状况</h3>
        <van-tag type="warning">亚健康</van-tag>
        <p class="tip">需要严格控制生活习惯哦</p>
      </div>

      <!-- 健康数据 -->
      <div class="data-section">
        <!-- BMI -->
        <div class="data-card">
          <div class="card-header">
            <h4>BMI</h4>
            <van-button @click="goToBMI" type="success">记录</van-button>
          </div>
          <div class="main-value">{{ bmiValue }}</div>
          <div class="card-body">
            <span>体重 {{ weightValue }} kg </span>
            <span> 身高 {{ heightValue }} cm</span>
          </div>
          <van-tag v-if="bmiStatus" :type="bmiStatus === '超标' ? 'danger' : 'success'">{{ bmiStatus }}</van-tag>
        </div>

        <!-- 血压 -->
        <div class="data-card">
          <div class="card-header">
            <h4>血压</h4>
            <van-button @click="goToBloodPressure" type="success">记录</van-button>
          </div>
          <div class="card-body pressure">
            <div class="dual-value">
              <div class="value">
                {{ systolicPressureValue }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<small
                  v-if="systolicPressureValue > 140">↑</small>
              </div>
              <div class="value">{{ diastolicPressureValue }}</div>
            </div>
            <span>收缩压&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span>舒张压</span>
            <div class="unit">mmHg</div>
          </div>
        </div>
        <!-- 血糖 -->
        <div class="data-card">
          <div class="card-header">
            <h4>血糖</h4>
            <van-button @click="goToBloodSugar" type="success">记录</van-button>
          </div>
          <div class="card-body">
            <div class="main-value">餐前血糖:{{ fastingBloodGlucoseValue }} <span class="unit">mmol/L</span></div>
            <div class="main-value">餐后血糖: {{ postprandialBloodGlucoseValue }} <span class="unit">mmol/L</span></div>
          </div>
        </div>
      </div>

      <!-- 药物治疗 -->
      <div class="medication">
        <div class="header">
          <h3>药物治疗</h3>
          <span class="course">服药疗程:2个月 剩余12天</span>
        </div>
        <van-cell center>
          <template #title>
            <span class="drug-name">1.二甲双胍</span>
            <div class="dose">每日一次 早餐前服用2mg</div>
          </template>
          <van-checkbox checked-color="#1989fa" />
        </van-cell>
      </div>

      <!-- 打卡记录 -->
      <div class="checkin">
        <h3>打卡记录</h3>
        <van-cell v-for="(item, index) in checkins" :key="index" :title="item.title" :value="item.value"
          :label="item.time">
          <template #icon>
            <van-icon :name="item.icon" size="20" />
          </template>
        </van-cell>
      </div>

      <!-- 复诊计划 -->
      <div class="appointment">
        <div class="header">
          <h3>复诊计划</h3>
          <van-tag color="#87d068" plain>已预约</van-tag>
        </div>
        <div class="contentappointment">
          <p class="time">2023-12-10 上午10:00-10:30</p>
          <p class="location">xx医院xx科室</p>
          <p class="purpose">复查血糖</p>
        </div>
      </div>

      <!-- 协议链接 -->
      <div class="protocol">
        <a href="#">《用户协议》</a>
        <a href="#">《隐私协议》</a>
      </div>
    </div>
  </div>
  <van-tabbar v-model="active">
    <!-- 底部导航保持不变 -->
    <van-tabbar-item icon="home-o" :to="'/Setup'">首页</van-tabbar-item>
    <van-tabbar-item icon="column" to="/Health">科普</van-tabbar-item>
    <van-tabbar-item icon="description" :to="'/messages'">消息</van-tabbar-item>
    <van-tabbar-item icon="contact" :to="'/Setup'">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref, onMounted,reactive } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import {
  NavBar,
  Grid,
  GridItem,
  Button,
  Image as VanImage,
  Tag,
  Cell,
  Checkbox,
  Icon
} from 'vant';
import axios from 'axios';
import { useCounterStore } from '@/stores/counter';

const store = useCounterStore();
const router = useRouter();
const route = useRoute();
const checkins = ref([
  {
    title: '散步',
    time: '3月12日 17:55',
    value: '4.5公里 30:51',
    icon: 'location-o'
  },
  {
    title: '午餐',
    time: '3月12日 11:55',
    value: '800大卡',
    icon: 'smile-comment-o'
  }
]);

// 定义BMI相关数据
const bmiValue = ref('');
const weightValue = ref('');
const heightValue = ref('');
const bmiStatus = ref('');

// 定义血压相关数据
const systolicPressureValue = ref('');
const diastolicPressureValue = ref('');

// 定义血糖相关数据
const fastingBloodGlucoseValue = ref('');
const postprandialBloodGlucoseValue = ref('');

//跳转至BMI界面
const goToBMI = () => {
  router.push('/BMI');
};

//跳转至血压MI界面
const goToBloodPressure = () => {
  router.push('/BloodPressure');
};

//跳转至血糖界面
const goToBloodSugar = () => {
  router.push('/BloodSugar');
};

onMounted(() => {
  const userId = store.useStore.mId;

  // 获取BMI数据
  axios.get(`http://localhost:5223/api/HealthMonitoring/GetBMI`, {
    params: {
      UserId: userId
    }
  })
    .then(response => {
      console.log('BMI数据响应:', response.data.data);
      const data = response.data.data;
      if (data.length > 0) {
        // 确保数据类型正确，这里假设BMI、体重、身高为数值类型
        bmiValue.value = data[0].bmi;
        weightValue.value = data[0].weight;
        heightValue.value = data[0].higher;
        bmiStatus.value = data[0].bmi > 24 ? '超标' : '正常';
      }
    })
    .catch(error => {
      console.error('获取BMI数据失败', error);
    });

  // 获取血压数据
  axios.get(`http://localhost:5223/api/HealthMonitoring/GetBloodPressure`, {
    params: {
      UserId: userId
    }
  })
    .then(response => {
      console.log('血压数据响应:', response.data.data);
      const data = response.data.data;
      if (data.length > 0) {
        systolicPressureValue.value = data[0].systolicPressure;
        diastolicPressureValue.value = data[0].diastolicPressure;
      }
    })
    .catch(error => {
      console.error('获取血压数据失败', error);
    });

  // 获取血糖数据
  axios.get(`http://localhost:5223/api/HealthMonitoring/GetBloodSugar`, {
    params: {
      UserId: userId
    }
  })
    .then(response => {
      console.log('血糖数据响应:', response.data.data);
      const data = response.data.data;
      if (data.length > 0) {
        fastingBloodGlucoseValue.value = data[0].fastingBloodGlucose;
        postprandialBloodGlucoseValue.value = data[0].postprandialBloodGlucose;
      }
    })
    .catch(error => {
      console.error('获取血糖数据失败', error);
    });
});

//跳转至健康方案页面
const goTohealthplan=()=>{
  router.push("/healthplan");
}
//跳转至聊天页面
const goToChat=()=>{
  router.push("/messages");
}



</script>

<style scoped>
.health-app {
  background: #fff;
  min-height: 100vh;
}

.content {
  background: #f5f5f5;
  padding: 60px 16px 80px;
}

.contentappointment {
  background: #f7f8fa;
  padding: 60px 16px 80px;
}

/* 用户信息 */
.user-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #f7f8fa;
  border-radius: 8px;
  margin-bottom: 20px;
  gap: 15px;
  /* 新增约束 */
  min-height: 92px;
  /* 60px头像 + 32px padding */
  position: relative;
  /* 创建新的层叠上下文 */
}

.user-info h2 {
  margin: 0;
  font-size: 18px;
}

.phone {
  color: #969799;
  font-size: 12px;
}

/* 功能入口 */
.action-grid {
  margin: 16px 0;
}

:deep(.van-button) {
  height: 44px;
  border-radius: 8px;
}

:deep(.van-button--primary) {
  background: #1989fa;
}

:deep(.van-button--info) {
  background: #f0f8ff;
  border: 1px solid #1989fa;
  color: #1989fa;
}

/* 健康数据 */
.data-section {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.user-avatar {
  width: 20px;
  /* 设置宽度 */
  height: 20px;
  /* 设置高度 */
}

.data-card {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.main-value {
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.details {
  color: #969799;
  font-size: 12px;
  margin-top: 8px;
}

.dual-value {
  display: flex;
  gap: 20px;
}

.dual-value .value {
  font-size: 20px;
  position: relative;
}

.dual-value small {
  font-size: 12px;
  color: #ee0a24;
  position: absolute;
  top: -4px;
  right: -12px;
}

/* 药物治疗 */
.medication {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  margin: 16px 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.drug-name {
  font-weight: 500;
}

.dose {
  color: #969799;
  font-size: 12px;
}

/* 复诊计划 */
.appointment {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  margin: 16px 0;
}

.appointment .time {
  color: #07c160;
  font-weight: 500;
}

.appointment .location {
  color: #969799;
  margin: 4px 0;
}

/* 协议链接 */
.protocol {
  text-align: center;
  padding: 16px;

  a {
    color: #1989fa;
    margin: 0 12px;
    font-size: 12px;
  }
}

/* 修改后的头像样式 */
.user-avatar {
  flex-shrink: 0;
  width: 60px !important;
  /* 强制尺寸 */
  height: 60px !important;
  min-width: 60px;
  /* 防止压缩 */
}

/* 深度作用选择器 */
.user-avatar :deep(.van-image__img) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block !important;
  border-radius: 50%;
}
</style>
